<template>
  <div style="width: 100%" @click="treeHideRight">
    <div style="width: 250px; float: left">
      <a-card @contextmenu.prevent="" size="small" class="eip-admin-card-small">
        <div slot="title">
          <a-space>
            <a-button type="primary" @click="reload(true)"
              ><a-icon type="redo" />刷新</a-button
            >
            <a-button type="primary"
              ><a-icon type="fullscreen-exit" />折叠</a-button
            >
          </a-space>
        </div>
        <a-spin :spinning="tree.loading" :delay="0">
          <a-directory-tree
            :style="tree.style"
            :tree-data="tree.data"
            :icon="treeIcon"
            @select="treeSelect"
            @rightClick="treeRight"
          >
          </a-directory-tree>
        </a-spin>
        <div
          class="ant-dropdown ant-dropdown-placement-bottomLeft"
          :style="tree.right.style"
          v-if="tree.right.item"
        >
          <ul
            class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root ant-dropdown-menu-light ant-dropdown-content"
          >
            <li
              class="ant-dropdown-menu-item"
              @click="treeAdd"
              v-if="visible.add"
            >
              <a-icon type="plus" /> 新增
            </li>
            <li
              class="ant-dropdown-menu-item"
              @click="treeUpdate"
              v-if="visible.update"
            >
              <a-icon type="edit" />修改
            </li>
            <li
              class="ant-dropdown-menu-item"
              @click="treeDel"
              v-if="visible.del"
            >
              <a-icon type="delete" />删除
            </li>
          </ul>
        </div>
      </a-card>
    </div>
    <div style="float: left; margin-left: 10px; width: calc(100% - 260px)">
      <a-card class="margin-bottom-sm eip-admin-card-small">
        <eip-search
          ref="search"
          :option="table.search.option"
          @search="tableSearch"
          @advanced="tableAdvanced"
        ></eip-search>
      </a-card>

      <a-card class="eip-admin-card-small">
        <vxe-toolbar ref="toolbar" custom print :refresh="{ query: tableInit }">
          <template v-slot:buttons>
            <eip-toolbar
              @del="del"
              @update="update"
              @add="add"
              @copy="copy"
              @detail="detailClick"
              @onload="toolbarOnload"
            ></eip-toolbar>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="table"
          border
          resizable
          size="small"
          :seq-config="{
            startIndex: (table.page.param.current - 1) * table.page.param.size,
          }"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }"
          :print-config="{}"
          :loading="table.loading"
          :height="table.height"
          :data="table.data"
          :toolbar-config="table.toolbar"
          :tooltip-config="{ showAll: true, contentMethod: tableTooltip }"
          :sort-config="{
            trigger: 'cell',
            defaultSort: { field: 'orderNo', order: 'asc' },
            orders: ['desc', 'asc'],
          }"
          @sort-change="tableSort"
        >
          <vxe-table-column
            type="checkbox"
            width="60"
            align="center"
            fixed="left"
          ></vxe-table-column>
          <vxe-table-column
            type="seq"
            title="序号"
            width="60"
            fixed="left"
          ></vxe-table-column>
          <vxe-table-column field="name" title="名称"> </vxe-table-column>
          <vxe-table-column
            field="parentIdsName"
            title="层级"
            showOverflow="ellipsis"
          >
          </vxe-table-column>
          <vxe-table-column field="icon" title="图标" width="60" align="center">
            <template v-slot="{ row }">
              <a-icon :type="row.icon" :theme="row.theme" />
            </template>
          </vxe-table-column>
          <vxe-table-column field="path" title="地址" showOverflow="ellipsis">
          </vxe-table-column>
          <vxe-table-column
            field="isShowMenu"
            title="页面显示"
            align="center"
            width="80"
          >
            <template v-slot="{ row }">
              <a-switch :checked="row.isShowMenu" />
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="haveMenuPermission"
            title="菜单权限"
            align="center"
            width="80"
          >
            <template v-slot="{ row }">
              <a-switch :checked="row.haveMenuPermission" />
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="haveFunctionPermission"
            title="按钮权限"
            align="center"
            width="80"
          >
            <template v-slot="{ row }">
              <a-switch :checked="row.haveFunctionPermission" />
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="haveDataPermission"
            title="数据权限"
            align="center"
            width="80"
          >
            <template v-slot="{ row }">
              <a-switch :checked="row.haveDataPermission" />
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="isFreeze"
            title="禁用"
            align="center"
            width="80"
          >
            <template v-slot="{ row }">
              <a-switch :checked="row.isFreeze" />
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="orderNo"
            title="排序"
            align="center"
            width="80"
          >
          </vxe-table-column>
          <vxe-table-column field="remark" title="备注" showOverflow="ellipsis">
          </vxe-table-column>

          <vxe-table-column
            title="操作"
            align="center"
            fixed="right"
            width="100px"
          >
            <template v-slot:default="{ row }">
              <a-tooltip
                @click="tableUpdateRow(row)"
                title="编辑"
                v-if="visible.update"
              >
                <label class="text-eip eip-cursor-pointer">编辑</label>
              </a-tooltip>
              <a-divider type="vertical" v-if="visible.update" />
              <a-tooltip
                title="删除"
                v-if="visible.del"
                @click="tableDelRow(row)"
              >
                <label class="text-red eip-cursor-pointer"> 删除 </label>
              </a-tooltip>
            </template>
          </vxe-table-column>
        </vxe-table>

        <a-pagination
          class="padding-top-sm float-right"
          v-model="table.page.param.current"
          size="small"
          show-size-changer
          show-quick-jumper
          :page-size-options="table.page.sizeOptions"
          :show-total="(total) => `共 ${total} 条`"
          :page-size="table.page.param.size"
          :total="table.page.total"
          @change="tableInit"
          @showSizeChange="tableSizeChange"
        >
        </a-pagination>
      </a-card>
    </div>

    <edit
      ref="edit"
      :visible="edit.visible"
      :data="edit.data"
      :title="edit.title"
      :menuId="edit.menuId"
      :copy="edit.copy"
      @close="close"
      @save="perateStatus"
    ></edit>

    <permission-detail
      ref="detail"
      :visible="detail.visible"
      :title="detail.title"
      @close="detailClose"
    ></permission-detail>
  </div>
</template>

<script>
import { tree, query, del } from "@/services/system/menu/list";
import edit from "./edit";
import permissionDetail from "@/pages/system/permission/detail";
import eipSearch from "@/pages/common/usercontrol/eip-search";
import eipToolbar from "@/pages/common/usercontrol/eip-toolbar";
import XEUtils from "xe-utils";
import { selectTableRow, deleteConfirm } from "@/utils/util";
export default {
  components: { edit, eipSearch, eipToolbar, permissionDetail },
  data() {
    return {
      tree: {
        style: {
          overflow: "auto",
          height: window.innerHeight - 194 + "px",
        },
        data: [],
        loading: true,
        right: {
          item: null,
          style: "",
        },
      },
      table: {
        columns: [],
        toolbar: {
          export: true,
          print: true,
          zoom: true,
          custom: true,
          slots: {
            buttons: "buttons",
          },
        },
        page: {
          param: {
            current: 1,
            size: this.$page.size,
            sord: "asc",
            sidx: "",
            id: "",
            filters: "",
          },
          total: 0,
          sizeOptions: this.$page.sizeOptions,
        },
        loading: true,
        data: [],
        height: window.innerHeight - 382,
        search: {
          option: {
            num: 4,
            config: [
              {
                field: "menu.Name",
                op: "cn",
                placeholder: "请输入菜单名",
                title: "名称",
                value: null,
                type: "text",
              },
              {
                field: "menu.Path",
                op: "cn",
                placeholder: "请输入地址",
                title: "地址",
                value: null,
                type: "text",
              },
              {
                field: "menu.Remark",
                op: "cn",
                placeholder: "请输入备注",
                title: "备注",
                value: null,
                type: "text",
              },
              {
                field: "menu.IsShowMenu",
                op: "eq",
                title: "页面显示",
                placeholder: "请选择页面显示",
                type: "bool",
              },
              {
                field: "HaveMenuPermission",
                op: "eq",
                title: "菜单权限",
                placeholder: "请选择菜单权限",
                type: "bool",
              },
              {
                field: "HaveFunctionPermission",
                op: "eq",
                title: "按钮权限",
                placeholder: "请选择按钮权限",
                type: "bool",
              },
              {
                field: "HaveDataPermission",
                op: "eq",
                title: "数据权限",
                placeholder: "请选择数据权限",
                type: "bool",
              },
              {
                field: "HaveFieldPermission",
                op: "eq",
                title: "字段权限",
                placeholder: "请选择字段权限",
                type: "bool",
              },
              {
                field: "IsFreeze",
                op: "eq",
                placeholder: "请选择禁用状态",
                title: "禁用",
                type: "bool",
              },
            ],
          },
        },
      },

      edit: {
        visible: false,
        menuId: null,
        title: null,
        copy: false,
        data: [],
      },

      detail: {
        visible: false,
        title: null,
      },

      visible: {
        add: false,
        update: false,
        del: false,
      },
    };
  },
  mounted() {
    //表格和工具栏进行关联
    this.$refs.table.connect(this.$refs.toolbar);
    this.treeInit();
    this.tableInit();
  },
  methods: {
    /**
     * 树右键
     */
    treeRight({ event, node }) {
      const x =
        event.currentTarget.offsetLeft + event.currentTarget.clientWidth;
      const y = event.clientY;
      this.tree.right.item = {
        id: node._props.eventKey,
        title: node._props.title,
      };
      this.tree.right.style = {
        position: "absolute",
        maxHeight: 40,
        textAlign: "center",
        left: `${x + 10}px`,
        top: `${y - 112}px`,
        display: "flex",
        flexDirection: "row",
      };
    },

    /**
     * 树右键菜单隐藏
     */
    treeHideRight() {
      this.tree.right.item = null;
    },
    /**
     * 列表提示
     */
    tableTooltip({ type, column, row, items, _columnIndex }) {
      const { property } = column;
      if (row && (property === "parentIdsName" || property === "openUrl")) {
        return row[property];
      }
      return null;
    },

    /**
     * 菜单树
     */
    treeInit() {
      let _this = this;
      tree().then((result) => {
        _this.tree.loading = false;
        _this.tree.data = result.data;
        _this.edit.data = result.data;
      });
    },

    /**
     * 树图标
     */
    treeIcon(props) {
      const { slots } = props;
      return <a-icon type={slots.icon} theme={slots.theme} />;
    },
    /**
     * 树选中
     */
    treeSelect(electedKeys, e) {
      this.table.page.param.id = electedKeys[0];
      this.table.page.param.current = 1;
      this.tableInit();
    },

    /**
     * 树删除
     */
    treeDel() {
      let _this = this;
      const item = _this.tree.right.item;
      deleteConfirm(
        "模块【" + item.title + "】" + _this.$msg.delete,
        function() {
          _this.$message.loading(_this.$msg.delloading);
          del({ id: item.id }).then((result) => {
            if (result.code == _this.$resultCode.success) {
              _this.reload(false);
            }
            _this.$message.destroy();
            _this.$message.success(result.msg);
          });
        },
        _this
      );
    },

    /**
     * 树新增
     */
    treeAdd() {
      const item = this.tree.right.item;
      this.$refs.edit.setParent(item.id, item.title);
      this.add();
    },

    /**
     * 树更新
     */
    treeUpdate() {
      const item = this.tree.right.item;
      this.edit.title = "模块编辑-" + item.title;
      this.edit.visible = true;
      this.edit.copy = false;
      this.$refs.edit.find(item.id);
    },

    /**
     * 列表数据
     */
    tableInit() {
      let _this = this;
      this.table.loading = true;
      this.table.page.param.filters = this.$refs.search.getFilters();
      query(_this.table.page.param).then((result) => {
        if (result.code == _this.$resultCode.success) {
          _this.table.data = result.data;
          _this.table.page.total = result.count;
        }
        _this.table.loading = false;
      });
    },
    /**
     * 列表排序改变
     */
    tableSort({ column, sidx, sord }) {
      this.table.page.param.current = 1;
      this.table.page.param.sidx = sidx;
      this.table.page.param.sord = sord;
      this.tableInit();
    },
    /**
     *数量改变
     */
    tableSizeChange(current, pageSize) {
      this.table.page.param.size = pageSize;
      this.tableInit();
    },
    /**
     * 列表查询
     */
    tableSearch() {
      this.table.page.param.current = 1;
      this.tableInit();
    },
    /**
     * 树更新
     */
    tableUpdateRow(row) {
      this.edit.title = "模块编辑-" + row.name;
      this.edit.visible = true;
      this.$refs.edit.find(row.menuId);
    },
    /**
     * 删除
     */
    tableDelRow(row) {
      let _this = this;
      deleteConfirm(
        "模块【" + row.name + "】" + _this.$msg.delete,
        function() {
          _this.$message.loading(_this.$msg.delloading);
          del({ id: row.menuId }).then((result) => {
            if (result.code == _this.$resultCode.success) {
              _this.reload(false);
            }
            _this.$message.destroy();
            _this.$message.success(result.msg);
          });
        },
        _this
      );
    },
    /**
     * 编辑关闭
     */
    close() {
      this.edit.visible = false;
    },

    /**
     * 新增
     */
    add() {
      this.edit.title = "模块新增";
      this.edit.visible = true;
      this.edit.copy = false;
    },

    /**
     * 修改
     */
    update() {
      let _this = this;
      selectTableRow(
        _this.$refs.table,
        function(row) {
          _this.edit.title = "模块编辑-" + row.name;
          _this.edit.visible = true;
          _this.edit.copy = false;
          _this.$refs.edit.find(row.menuId);
        },
        _this
      );
    },
    /**
     * 复制
     */
    copy() {
      let _this = this;
      selectTableRow(
        _this.$refs.table,
        function(row) {
          _this.edit.title = "模块复制-" + row.name;
          _this.edit.visible = true;
          _this.edit.copy = true;
          _this.$refs.edit.find(row.menuId);
        },
        _this
      );
    },

    /**
     * 删除
     */
    del() {
      let _this = this;
      selectTableRow(
        _this.$refs.table,
        function(rows) {
          //提示是否删除
          deleteConfirm(
            _this.$msg.delete,
            function() {
              _this.$message.loading(_this.$msg.delloading);
              let ids = XEUtils.map(rows, (item) => item.menuId);
              del({ id: ids.join(",") }).then((result) => {
                if (result.code == _this.$resultCode.success) {
                  _this.reload(false);
                }
                _this.$message.destroy();
                _this.$message.success(result.msg);
              });
            },
            _this
          );
        },
        _this,
        false
      );
    },

    //提示状态信息
    perateStatus(result) {
      if (result.code === this.$resultCode.success) {
        this.edit.visible = false;
        this.reload(false);
      }
    },

    /**
     * 重新加载
     */
    reload(reset) {
      if (reset) this.table.page.param.id = this.$gemptyGuid;
      this.table.page.param.current = 1;
      this.treeInit();
      this.tableInit();
    },

    /**
     * 权限按钮加载完毕
     */
    toolbarOnload(buttons) {
      this.visible.add = buttons.filter((f) => f.method == "add").length > 0;
      this.visible.update =
        buttons.filter((f) => f.method == "update").length > 0;
      this.visible.del = buttons.filter((f) => f.method == "del").length > 0;
    },

    /**
     * 调整,收起展开高度
     */
    tableAdvanced(advanced) {
      this.table.height = window.innerHeight - (advanced ? 382 : 302);
    },

    /**
     * 关闭详情
     */
    detailClose() {
      this.detail.visible = false;
    },

    /**
     *详情点击
     */
    detailClick() {
      let _this = this;
      selectTableRow(
        _this.$refs.table,
        function(row) {
          _this.detail.title = "模块使用详情-" + row.name;
          _this.detail.visible = true;
          _this.$refs.detail.find(row.menuId, 0);
        },
        _this
      );
    },
  },
};
</script>

<style lang="less" scoped></style>
